/* common */
#app >div ,
#app { width: 100%; height: 100%;}

body,html { width: 100%; overflow-x: hidden;}
.box-row{
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: space-around;
}
.box-column{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 100%;
}

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
.section1-enter::-webkit-scrollbar
  {
      width: 3px;
      height: 16px;
      background-color: #000;
  }

  /*定义滚动条轨道 内阴影+圆角*/
.section1-enter::-webkit-scrollbar-track
  {
      -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
      border-radius: 10px;
      background-color: #999;
  }

  /*定义滑块 内阴影+圆角*/
.section1-enter::-webkit-scrollbar-thumb
  {
      border-radius: 10px;
      -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
      background-color: #000;
  }



/* section1 */
.section1{background: no-repeat center top / 100% 100%;background-size: cover; padding: 30px; width: 100%; height: 100%; box-sizing: border-box; color: rgba(255,255,255, 0.6);}
.section1-title{ padding:0 0 20px 10px;}
.section1-title h2{ font-size: 42px;color: #fff}
.section1-title h2 img{height: 50px;margin-right: 8px;position: relative;top:12px;}
.section1-map{width: 800px; height: 600px;box-sizing: border-box;}
.section1-map iframe{border: 1px solid #234B9B;border-radius: 10px;overflow: hidden;width: 100%;height: 100%;box-sizing: border-box;}
.section1-data{ width: 1000px;}
.section1-title2{background: linear-gradient(to right, #0C8E7A, #0C68B1); display: flex; flex-direction: row; padding: 14px 0; border-radius: 10px;}
.section1-title2 dl{ flex: 1; text-align: center; border-right: 1px solid #fff;}
.section1-title2 dl:nth-last-child(1){ border: none;}
.section1-title2 dt{ font-size: 18px; line-height: 1.6; padding-bottom: 12px;color: #fff;}
.section1-title2 dd{ font-size: 30px;color: #fff;}
.section1-title2 dd small{ font-size: 20px;}
.section1-enter{ width: 610px; height: 215px; margin-top: 26px;}
.section1-enter h5{ background: #3D3E4F; font-size: 14px;text-align: center; font-weight: normal;height: 36px; line-height: 36px;border: 1px solid #5F5F6C; border-bottom: none; color: #32FAF8; box-sizing: border-box; border-radius: 10px 10px 0 0;}
.section1-enter table{ width: 100%; display: flex; justify-content: flex-start; flex-direction: column;}
.section1-enter table tr{flex-direction: row; display: flex; width: 100%;}
.section1-enter table td:nth-child(1),
.section1-enter table th:nth-child(1){ flex: 3;}
.section1-enter table td:nth-child(2),
.section1-enter table th:nth-child(2){ flex: 5;}
.section1-enter table td:nth-child(3),
.section1-enter table th:nth-child(3){ flex: 2;}
.section1-enter table td:nth-child(4),
.section1-enter table th:nth-child(4){ flex: 2;}
.section1-enter table th{border-top: 1px solid #5F5F6C;border-left: 1px solid #5F5F6C;height: 36px; line-height: 36px; background: #3D3E4F;}
.section1-enter table th:nth-last-child(1){border-right:  1px solid #5F5F6C;}
.section1-enter table td:nth-last-child(1){border-right: 1px solid #5F5F6C; }
.section1-enter table tr:nth-last-child(1) td{border-bottom: 1px solid #5F5F6C;}
.section1-enter table tr:nth-last-child(1) td:nth-last-child(1){border-radius: 0 0 10px 0;}
.section1-enter table tr:nth-last-child(1) td:nth-child(1){border-radius: 0 0 0 10px;}
.section1-enter table th{box-sizing: border-box;}
.section1-enter table td{border-top: 1px solid #5F5F6C;border-left: 1px solid #5F5F6C;height: 30px; line-height: 30px; text-align: center; box-sizing: border-box;}
.section1-outof{}
.section1-visualization{ flex: 1; margin-left: 30px; border: 1px solid #234B9B;  border-radius: 10px; box-sizing: border-box;  margin-top: 30px;}
.section1 canvas{border-radius: 10px;}
.section1-contrast{ width: 800px; height: 300px; border: 1px solid #234B9B; border-radius: 10px; box-sizing: border-box; overflow: hidden; margin-top: 30px;}
.section1-trend{width: 1000px; height: 300px; border: 1px solid #234B9B; border-radius: 10px; box-sizing: border-box; overflow: hidden; margin-top: 30px;}


/*section5*/
.section5-li{float: left;width: 31%; box-sizing: border-box;padding: 20px;height: 41%;background-color: rgba(19,22,41,0.6);margin: 1%;border: 1px solid #234B9B;border-radius: 10px;}
.section5-li>div{width:100%;height:100%;position:relative}


/*section2 section4*/
.sub-box{width:30%;height:calc(100% - 80px);float:left;}
.sub-box1{width:39%;height:calc(100% - 80px);float:left;}
.echart-brand{width:94%;height:94%;margin:0 auto;position:relative;top:10px;border:1px solid #2C65CE;border-radius: 10px;overflow:hidden;}
.chartbox1{width:100%;height:300px;}
.chartbox{width:100%;height:455px;}




























